<template>
   <el-input-number 
     :min="min" 
     controls-position="right" 
     v-model="value" 
     @change="handleChange"
     />
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

defineOptions({
    name:"InputNumber"
});

const props = defineProps({
    min: {
        type: Number,
        default: 0
    },
    modelValue: {
        type: [Number, String],
        required: true
    }
});

const emit = defineEmits(["update:modelValue"]);
const value = ref("");
const handleChange = () => {
    emit('update:modelValue', value.value + "px");
};

watch(()=>props.modelValue, (newVal) => {
    value.value = newVal?.replace("px","");
}, {immediate: true})
</script>

<style scoped lang="scss"></style>